<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="zhoumiao">
    <meta name="keywords" content="个人作品集, 个人网站, 作品集, 设计作品集, UX/UI, 交互作品, 设计师网站">

    <title>zhoumiao</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="LOGO.png" type="image/x-icon" />
</head>

<body>


    <div class="container">

        <div class="nav">
            <a class="link-1" href="#yi">Introduction</a>
            <a class="link-1" href="#er">Experiences</a>
            <a class="link-1" href="#san">Dreams</a>
            <a class="link-1" href="#si">Works </a>
        </div>

        <div class="first">
            <h1 id="yi"></h1>
            <div class="one">
                <div class="a"></div>
                <div class="live">LIVE</div>
                <div class="topic">Welcome to my world. <br>This is a treasure girl.</div>
                <div class="do  line_ONE anim-typewriter ">What might she be in the future?</div>
                <div class="re  line_ONE anim-typewriter">Designers<br>illustrators<br> folk singers</div>

                <HR class="henga" width="20%" color=white SIZE=2>
                <HR class="shua" width="0.4%" color=white SIZE=44>
                <HR class="hengb" width="20%" color=white SIZE=2>
                <HR class="shub" width="0.4%" color=white SIZE=44>
                <HR class="hengc" width="20%" color=white SIZE=2>
                <HR class="shuc" width="0.4%" color=white SIZE=60>
                <div class="xiangkuangren"></div>
            </div>
        </div>
        <div class="second"></div>
        <div class="second">
            <h1 id="er"></h1>
            <div class="two"></div>
            <div class="flip-card-container">
                <div class="flip-card">
                    <div class="flip-card-front">
                        <img src="2.jpg" alt="Albert Einstein">
                    </div>
                    <div class="flip-card-back">
                        <p>
                            "Try to catch up with the person you are expected to be."
                            <span>- zhoumiao -</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="mi">PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY
                ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>PAY ATTENTION THIS IS HER INTEODUCTION<br>

            </div>
            <div class="fa">"</div>
            <div class="sol">"</div>
            <div class="la">LOOK CAREFULLY →</div>
            <div class="xi">
                She's a 19-year-old treasure girl,and she was studying design. She was curious about the world. She likes to try new things. She also enjoys learning different new skills. She likes music as well as painting.
            </div>

        </div>
        <div class="third">
            <h1 id="san"></h1>
            <div class="c"></div>
            <div class="d"></div>
            <div class="e"></div>
            <div class="f"></div>
            <HR class="thirda" width="25%" color=white SIZE=2>
            <HR class="thirdb" width="25%" color=white SIZE=2>
            <HR class="thirdc" width="0.06%" color=white SIZE=340>
            <HR class="thirdd" width="0.06%" color=white SIZE=340>
            <HR class="thirde" width="0.06%" color=white SIZE=165>
            <HR class="thirdf" width="0.06%" color=white SIZE=165>
            <div class="pingxing"></div>
            <div class="zhaopian"></div>
            <div class="zhaopiana"></div>
            <div class="zhaopianb"></div>
            <div class="zhaopianc"></div>
            <div class="herdream">HER DREAM</div>
            <hr class="xuxiana" style="width:17%;border:2px dashed white" />
            <hr class="xuxianb" style="width:10%;border:1px dashed white" />
            <hr class="xuxianc" style="width:7%;border:1px dashed white" />
            <hr class="xuxiand" style="width:10%;border:1px dashed white" />
            <hr class="xuxiane" style="width:14%;border:2px dashed white" />
            <hr class="xuxianf" style="width:4%;border:1px dashed white" />
            <hr class="xuxiang" style="width:8%;border:1px dashed white" />
            <hr class="xuxianh" style="width:6%;border:1px dashed white" />
            <hr class="xuxiani" style="width:23%;border:2px dashed white" />
            <hr class="xuxianj" style="width:14%;border:1px dashed white" />
            <hr class="xuxiank" style="width:10%;border:1px dashed white" />
            <hr class="xuxianl" style="width:17%;border:1px dashed white" />
            <hr class="xuxianm" style="width:19%;border:2px dashed white" />
            <hr class="xuxiann" style="width:15%;border:1px dashed white" />
            <hr class="xuxiano" style="width:11%;border:1px dashed white" />
            <hr class="xuxianp" style="width:13%;border:1px dashed white" />
            <div class="dreama">
                <button class="buttona">At 25, she wanted to be a designer. Using her work to express her strange ideas.</button>
            </div>
            <div class="dreamb"><button class="buttonb"> After 35, she wanted to be an illustrator. With the pen in her hand to show the world in her mind.</button></div>
            <div class="dreamc"><button class="buttonc">At the age of 45, she wanted to travel around the world, see the beauty of the world.</button></div>
            <div class="dreamd"><button class="buttond">At 50, she wants to open a folk bar in Lijiang, Yunnan, and hear the stories of people coming and going.</button></div>
        </div>


        <div class="forth">
            <div id="wrapperss">
                <div id="spidercat">
                    <div class="head">
                        <div class="eye-left"></div>
                        <div class="eye-right"></div>
                        <div class="ear-left"></div>
                        <div class="ear-right"></div>
                    </div>
                    <div class="body">
                        <div class="spider"></div>
                        <div class="arm-left"></div>
                        <div class="arm-right"></div>
                    </div>
                    <div class="legs">
                        <div class="boot-left"></div>
                        <div class="boot-right"></div>
                    </div>
                </div>
            </div>
            <h1 id="si"></h1>
            <a href="#" class="photo">
                <h1>2020.8.15</h1>
                <img src="7.jpg" />
                <div class="glow-wrap">
                    <i class="glow"></i>
                </div>
            </a>
            <a href="#" class="photoa">
                <h1>2020.8.27</h1>
                <img src="8.jpg" />
                <div class="glow-wrap">
                    <i class="glow"></i>
                </div>
            </a>
            <a href="#" class="photob">
                <h1>2020.10.18</h1>
                <img src="10.jpg" />
                <div class="glow-wrap">
                    <i class="glow"></i>
                </div>
                <a href="#" class="photoc">
                    <h1>2020.9.2</h1>
                    <img src="9.jpg" />
                    <div class="glow-wrap">
                        <i class="glow"></i>
                    </div>
                </a>

                <div class="fieth">
                    <section id="slider">
                        <input type="radio" name="slider" id="s1">
                        <input type="radio" name="slider" id="s2">
                        <input type="radio" name="slider" id="s3" checked>
                        <input type="radio" name="slider" id="s4">
                        <input type="radio" name="slider" id="s5">
                        <label for="s1" id="slide1"></label>
                        <label for="s2" id="slide2"></label>
                        <label for="s3" id="slide3"></label>
                        <label for="s4" id="slide4"></label>
                        <label for="s5" id="slide5"></label>
                    </section>
                    <div class="windmill">
                        <div class="stick"></div>
                        <div class="wind">
                            <div class="wind1"></div>
                            <div class="wind2"></div>
                            <div class="wind3"></div>
                            <div class="wind4"></div>
                        </div>
                    </div>

                </div>
                <div class="sixth">
                    <h1>Are you excited to see these works? </h1>
                    <h6>Hurry up and click on that beating heart！</h6>
                    <div class="redheart">
                        <a href=" http://zhou-miao-maio.gitee.io/turn-the-page" target="_blank" class="heart-icon"></a>
                    </div>>


                </div>
            </a>
        </div>
        <div class="seventh">
            <div class="wrappers">
                <ul class="social_icons">
                    <li>
                        <a href="#"><img src="zhoumiao.png">
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="zhoumiaoqq.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="zhoumiaoweibo.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="zhoumiaodouyin.jpg"></a>
                    </li>
                </ul>
            </div>
            <div class="wenzia">
                <h8>Wechat</h8>
            </div>
            <div class="wenzib">
                <h8>QQ</h8>
            </div>
            <div class="wenzic">
                <h8>Micro blog</h8>
            </div>
            <div class="wenzid">
                <h8>TikTok</h8>
            </div>
            <!-- <embed src="perfect.mp3" width=170 height=25 loop="true" autostart="true"> -->
            <audio src="perfect.mp3" autoplay loop></audio>
        </div>
        <!-- <div class="seventh"></div> -->

    </div>

</body>

</body>

</html>